<template>
	<view>
		<image :src="baseurl+shop_image[0]" mode="widthFix" class="lc-head-img">
		</image>
		<view class="lc-box">
			<view class="lc-bnane">{{detail.shopname}}</view>
			<view class="lc-new-con">
				<view class="lc-new-left">
					<view class="lc-address">
						<image src="/static/address.png" mode="widthFix"></image>
						<view>{{detail.city}}</view>
					</view>
					<!-- <view class="lc-time">{{detail.ren_num}} <text
							v-for="(con,num) in detail.category">{{con.name}}</text></view> -->
				</view>
				<view class="lc-new-right">
					<view class="lc-anniu" @click="address">
						<image :src="baseurl+'/imgs/re1.png'" mode="widthFix"></image>
						<view>导航</view>
					</view>
					<view class="lc-anniu" @click="call">
						<image :src="baseurl+'/imgs/re2.png'" mode="widthFix"></image>
						<view>电话</view>
					</view>
				</view>
			</view>
			<view class="detail-con" v-if="detail.bio">
				<text>{{detail.bio}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseurl: getApp().globalData.baseurl,
				app: getApp().globalData,
				detail: {},
				shop_image: []
			}
		},
		onLoad(e) {
			this.app.post('/api/chef/index/store_info_new', {
				id: e.id,
				lat: uni.getStorageSync('latitude'),
				lng: uni.getStorageSync('longitude'),
			}).then(res => {
				console.log(res)
				this.shop_image = res.shop_image.split(',')
				this.detail = res
			})
		},
		methods: {
			address() {
				uni.openLocation({
					latitude: Number(this.detail.latitude),
					longitude: Number(this.detail.longitude),
					scale: 18,
					name: this.detail.shopname,
					address: this.detail.address,
					fail: (res) => {
						console.log(res)
					}
				})
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: String(this.detail.mobile),
					fail: (res) => {
						console.log(res)
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.lc-head-img {
		width: 750rpx;
	}

	.lc-box {
		width: 750rpx;
		background-color: #FFFFFF;
		border-radius: 30rpx 30rpx 0 0;
		margin-top: -260rpx;
		position: relative;
		padding: 40rpx 0;

		.lc-bnane {
			width: 690rpx;
			font-size: 40rpx;
			color: #333333;
			margin-left: 30rpx;
		}

		.lc-new-con {
			width: 690rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 30rpx;
			margin-top: 30rpx;

			.lc-new-left {
				.lc-address {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					image {
						width: 36rpx;
						height: 36rpx;
					}

					view {
						font-size: 30rpx;
						color: #666666;
						margin-left: 12rpx;
					}
				}

				.lc-time {
					font-size: 30rpx;
					color: #999999;

					text {
						margin-left: 10rpx;
					}
				}
			}

			.lc-new-right {
				display: flex;

				.lc-anniu {
					width: 52rpx;
					display: flex;
					justify-content: center;
					flex-wrap: wrap;
					margin-left: 42rpx;

					image {
						width: 52rpx;
						height: 52rpx;
					}

					view {
						font-size: 26rpx;
						color: #999999;
						margin-top: 10rpx;
					}
				}
			}
		}

		.detail-con {
			width: 690rpx;
			margin-left: 30rpx;
			border-top: 1px solid #eee;
			padding: 30rpx 0;
			margin-top: 30rpx;
		}
	}
</style>